<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>拼图游戏</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<style type="text/css">
			body { background: url(img/main.jpg) center center fixed; }
			.main { width: 440px; height: 550px; margin: 100px auto; border: 5px solid #000000; font-size: 0; position: relative; }
			.main img { width: 100px; height: 100px; border: 5px solid #000000; margin: 0; padding: 0; cursor: pointer; }
			.main ul { font-size: 0; padding: 0; margin: 0; border: 0 none; }
			.main li { display: inline-block; width: 100px; height: 100px; border: 5px solid #000000; font-size: 48px; font-weight: bold; text-align: center; line-height: 100px; cursor: pointer; }
			.main ul.theme { float: right; width: 330px; height: 110px; background: #339399; }
			.main ul.theme li { cursor: wait; vertical-align: middle; }
			.main ul#operators { background: #993933; }
			.main ul#operators li { color: #FFFFFF; }
			.main ul#operators li:first-child +li +li +li +li, .main ul#operators li:first-child +li +li +li +li +li, .main ul#operators li:first-child +li +li +li +li +li +li { display: block; }
			.main ul#pics { width: 330px; height: 330px; position: absolute; bottom: 0px; right: 0px; background: url(img/bg.jpg) center center no-repeat; -webkit-background-size: 100%;
			background-size: 100%; }
			.main ul#pics img { border: 0 none; }
		</style>
	</head>
	<body>
		<div class="main">
			<img src="img/logo.png" alt="" onclick="reset()">
			<ul class="theme">
				<li>拼</li>
				<li></li>
				<li>图</li>
			</ul>
			<ul id="operators">
				<li onclick="randomPics()">随机</li>
				<li onclick="move('up',1)">^</li>
				<li onclick="move('up',2)">^</li>
				<li onclick="move('up',3)">^</li>
				<li onclick="move('left',1)"><</li>
				<li onclick="move('left',2)"><</li>
				<li onclick="move('left',3)"><</li>
			</ul>
			<ul id="pics">
				<li><img src="img/1.jpg" alt=""></li>
				<li><img src="img/2.jpg" alt=""></li>
				<li><img src="img/3.jpg" alt=""></li>
				<li><img src="img/4.jpg" alt=""></li>
				<li><img src="img/5.jpg" alt=""></li>
				<li><img src="img/6.jpg" alt=""></li>
				<li><img src="img/7.jpg" alt=""></li>
				<li><img src="img/8.jpg" alt=""></li>
				<li><img src="img/9.jpg" alt=""></li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">

		var oPics = document.getElementById('pics');
		var arrPics = oPics.getElementsByTagName('li');
		var r = true;
		var nTrue = 0;
		function randomPics(){
			r = false;
			for (var i = 0; i < 9; i++) {
				var t = Math.ceil(Math.random()*10)%3+1;
				Math.random() > .5 ? move('left',t) : move('up',t);
			}
			r = true;
		}
		function reset() {
			window.location.reload();
		}
		function move(m,n) {
			switch(m) {
				case 'up':
					for (var i = 0; i < 2; i++) {
						oPics.appendChild(arrPics[n+2]);
						for (var t = 0; t < 2; t++) {
						oPics.appendChild(arrPics[n]);
						};
					};
					for (var i = 0; i < 4-n; i++) {
					oPics.appendChild(arrPics[n-1]);
					};
					break;
				case 'left':
					oPics.appendChild(arrPics[(n-1)*3]);
					for (var i = n*3; i < 9; i++) {
						oPics.appendChild(arrPics[Math.pow(n,2)+1]);
					};
					break;
			};
			if (r == true) {
				detection();
				if (nTrue == 9) {
					for (var i = 0; i < 9; i++) {
					var abc = setInterval("arrPics["+i+"].style.opacity = 0", (i+1)*500)
					};
				};
			};
		};
		function detection() {
				nTrue = 0;
				for (var i = 0;i < 9;i++) {
					if (arrPics[i].innerHTML == '<img src="img/'+(i+1)+'.jpg" alt="">') {
						++nTrue;
					}else{nTrue = 0;};
				};
		};


	</script>
</html>